<template>
    <div class="bpm-header" :style="{'background-image':`url(${headerBg})`}">
        <div class="header-title">
            {{title}}({{i18n('version', '版本号')}}:{{version}})
        </div>
        <div class="header-toolbar">
            <span class="header-icon">
                <img :src="imgUrl" alt="">
            </span>
        </div>
    </div>
</template>

<script>
import avatar2 from '@/assets/img/avatar2.jpg'
import headerBg from "./logo/headerBg.png";
import { mapState } from 'pinia'
import userUser from "@/stores/userUser";
import {Util,TokenUtil} from '@lowcode/jpaas-base-lib';
export default {
    name: "bpmHeader",
    computed: {
      ...mapState(userUser, ['user'])
    },
    props:{
        title:{
            default: ''
        },
        version:{
            default: ''
        }
    },
    data(){
        return {
            headerBg,
            imgUrl:avatar2,
        }
    },
    created(){
      this.getFilePath(this.user.photo);
    },
    methods:{
      i18n(name,text,key){
        return this.$ti18(name,text,"bpmHeader",key);
      },
      getFilePath(fileId) {
        if (fileId && fileId != '') {
          let token = TokenUtil.getToken();
          fileId = Util.encryptWord(fileId)
          this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId=' + fileId + '&accessToken=' + token
        }
      },
    }
}
</script>

<style scoped>
.bpm-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    background-color: #4285F4;
    background-repeat: no-repeat;
    background-position: top right;
    color: #fff;
}

.header-title{
    font-weight: bold;
}

.header-toolbar{
    display: flex;
    align-items: center;
}
.header-icon{
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 15px;
    vertical-align: middle;
    margin-right: 10px;
}
.header-icon >img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
